import { type FC, memo } from 'react';
import { useMemoizedFn } from 'ahooks';
import { TouchableOpacity } from 'react-native';
import type { ViewStyle } from 'react-native';
import ProImage from '../ProImage';
import type { PreviewItemProps } from './types';
import styles from './styles';

const PreviewItem: FC<PreviewItemProps> = (props) => {
  const {
    size,
    lastCol,
    lastRow,
    space,
    item
  } = props;

  const handlePress = useMemoizedFn(() => {
    props.onPress?.(props.index);
  });

  const imageStyle: ViewStyle = {
    width: size,
    height: size,
    marginRight: lastCol ? 0 : space,
    marginBottom: lastRow ? 0 : space
  };

  return (
    <TouchableOpacity
      activeOpacity={.8}
      onPress={handlePress}
      style={[imageStyle, styles.image]}
    >
      <ProImage
        source={{ uri: item.src }}
        style={styles.image_item}
      />
    </TouchableOpacity>
  );
}

export default memo(PreviewItem);